<cly-drawer
    @submit="onSubmit"
    @copy="onCopy"
    @close="onClose"
    :title="title"
    :saveButtonLabel="saveButtonLabel"
    v-bind="controls">
    <template v-slot:default="drawerScope">
        <cly-form-step id="widget-drawer">
            <cly-form-field
                name="widget_type"
                rules="required"
                :subheading="i18nM('dashboards.widget-type-description')"
                :label="i18nM('dashboards.widget-type')">
                <el-radio-group
                    class="bu-columns bu-is-multiline bu-m-0"
                    v-model="drawerScope.editedObject.widget_type"
                    :disabled="drawerScope.editedObject.__action === 'edit'"
                    @change="onWidgetTypeReset">
                    <div
                        v-for="(item, index) in widgetTypes"
                        v-if="item.isAllowed"
                        style="box-sizing: border-box;"
                        :class="['bu-column bu-is-one-quarter bu-m-0 bu-p-0',
                                {'bu-pr-2': ((index + 1) % 4 !== 0)},
                                {'bu-mb-3': (index < (widgetTypes.length - (widgetTypes.length % 4)))}]">
                        <el-radio
                            style="width:100%"
                            :label="item.type"
                            :key="item.type"
                            border>
                            <div class="has-ellipsis text-smallish cly-vue-dashboards__drawer-widget-type">
                                {{item.label}}
                            </div>
                        </el-radio>
                    </div>
                </el-radio-group>
            </cly-form-field>
            <component
                v-if="widgetSettingsGetter(drawerScope.editedObject) && widgetSettingsGetter(drawerScope.editedObject).isAllowed"
                :is="widgetSettingsGetter(drawerScope.editedObject).drawer.component"
                @reset="reset"
                :scope="drawerScope">
            </component>
        </cly-form-step>
    </template>
</cly-drawer>